import {designPage, reactive, useRefs} from "plain-design-composition";
import data from '../../../data/data-2.json';
import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
import {$message, Button, ButtonGroup, Form, FormItem, Plc, PlcCheck, PlcColorPicker, PlcDate, PlcDraggier, PlcIndex, PlcInput, PlcNumber, PlcRate, PlcSwitch, Switch, Table} from "../../../../packages";
import {DemoRow} from "../../Demo/DemoRow";

export const demoBaisc = designPage(() => {

  const state = reactive({
    data: data.slice(0, 6)
  });

  return () => (
    <DemoRow title="基本用法">
      <Table data={state.data}>
        <PlcIndex/>
        <PlcDraggier v-model={state.data}/>
        <Plc field="name" title="普通文本列"/>
        <Plc field="id" title="编号"/>
        <PlcInput field="name" title="文本框" required/>
        <PlcNumber field={'size'} title={'数字框'}/>
        <PlcDate field={'date'} title={'日期'}/>
        <PlcColorPicker field={'color'} title={'颜色'}/>
        <PlcRate field={'star'} title={'评分'}/>
        <PlcSwitch field={'flag'} title={'开关'}/>
      </Table>
    </DemoRow>
  );
});

export const demo1 = designPage(() => {

  const { refs, onRef } = useRefs({
    check: PlcCheck,
  });

  const state = reactive({
    data,
    editNodes: [] as iTableNode[],
    virtualFlag: true,
    onDblClickRow(tableNode: iTableNode) {
      if (!tableNode.state.edit) {
        tableNode.enableEdit();
        state.editNodes.push(tableNode);
      }
    },
    saveEdit: async () => {
      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
      if (validates.length > 0) {
        console.log(validates);
        const index = validates[0]!.node.state.index;
        const message = validates[0]!.validateResultData[0].message;
        $message.error(`第${index + 1}条记录校验不通过，${message}`);
        return;
      }
      // todo 网络保存逻辑
      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
      state.editNodes.forEach(tableNode => tableNode.closeEdit());
      state.editNodes = [];
    },
    cancelEdit: () => {
      state.editNodes.forEach(tableNode => {
        tableNode.cancelEdit();
      });
      state.editNodes = [];
    },
  });

  return () => (
    <DemoRow title={'基本用法'}>
      <Form column={1} singleColumnContentWidth={400}>
        <FormItem label={'是否开启虚拟滚动'}>
          <Switch v-model={state.virtualFlag}/>
        </FormItem>
        <FormItem label={'编辑'}>
          <ButtonGroup disabled={state.editNodes.length === 0}>
            <Button label={'打印数据'} disabled={false} onClick={() => console.log(data.map((item: any) => item.name).join(','))}/>
            <Button label={'获取选中行'} disabled={false} onClick={() => {
              $message(refs.check!.getSelected().map((item: any) => item.data.name).join(','));
            }}/>
            <Button onClick={state.saveEdit} label={'保存编辑'}/>
            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
          </ButtonGroup>
        </FormItem>
      </Form>
      <Table
        virtual={state.virtualFlag}
        data={state.data}
        onDblclickCell={state.onDblClickRow}
        showRows={5}
      >
        <PlcIndex/>
        <PlcCheck ref={onRef.check} field="id"/>
        <PlcDraggier v-model={state.data}/>
        <Plc field="name" title="普通文本列"/>
        <Plc field="id" title="编号"/>
        <PlcInput field="name" title="文本框" required/>
        <PlcNumber field={'size'} title={'数字框'}/>
        <PlcDate field={'date'} title={'日期'}/>
        <PlcColorPicker field={'color'} title={'颜色'}/>
        <PlcRate field={'star'} title={'评分'}/>
        <PlcSwitch field={'flag'} title={'开关'}/>
      </Table>
    </DemoRow>
  );
});
